精通 React Ref 回调：性能优化的终极指南

在现代 Web 开发的世界中，性能不仅仅是一项功能，而是一种必需品。对于使用 React 的开发人员来说，构建快速、响应迅速的用户界面是首要目标。虽然 React 的虚拟 DOM 和协调算法处理了大部分繁重的工作，但在某些特定模式和 API 中，深入理解对于释放峰值性能至关重要。其中一个领域是 ref 的管理，特别是经常被误解的 回调 ref 的行为。

Refs 提供了一种访问在 render 方法中创建的 DOM 节点或 React 元素的方法——对于管理焦点、触发动画或与第三方 DOM 库集成等任务来说，这是一个必不可少的逃生舱。虽然 useRef 已经成为函数式组件中简单情况的标准，但回调 ref 提供了更强大、更细粒度的控制，可以控制何时设置和取消设置引用。然而，这种能力带有一种微妙之处：回调 ref 在组件的生命周期中可能会多次触发，如果处理不当，可能会导致性能瓶颈和错误。

本综合指南将揭开 React ref 回调的神秘面纱。我们将探讨：

• 什么是回调 ref，以及它们与其他 ref 类型的区别。
• 回调 ref 被调用两次（一次使用 null，一次使用元素）的核心原因。
• 对 ref 回调使用内联函数的性能缺陷。
• 使用 useCallback hook 进行优化的最终解决方案。
• 处理依赖项和与外部库集成的高级模式。

在本文结束时，您将拥有充满信心地使用回调 ref 的知识，确保您的 React 应用程序不仅健壮，而且性能出色。

快速回顾：什么是回调 Ref？

在我们深入研究优化之前，让我们简要回顾一下什么是回调 ref。您不是传递由 useRef() 或 React.createRef() 创建的 ref 对象，而是将函数传递给 ref 属性。此函数在组件挂载和卸载时由 React 执行。

当组件挂载时，React 将使用 DOM 元素作为参数调用 ref 回调，当组件卸载时，它将使用 null 作为参数调用它。这使您可以精确地控制引用变为可用或即将被销毁的确切时刻。

这是一个函数式组件中的简单示例：

            import React, { useState } from 'react';

function TextInputWithFocusButton() {
  let textInput = null;

  const setTextInputRef = element => {
    console.log('Ref callback fired with:', element);
    textInput = element;
  };

  const focusTextInput = () => {
    // Focus the text input using the raw DOM API
    if (textInput) textInput.focus();
  };

  return (
    <div>
      <input type="text" ref={setTextInputRef} />
      <button onClick={focusTextInput}>
        Focus the text input
      </button>
    </div>
  );
}
            

              
                Copy
              
            
          

在此示例中，setTextInputRef 是我们的回调 ref。它将在呈现 <input> 元素时使用该元素调用，从而允许我们存储并在以后使用它来调用 focus()。

核心问题：为什么 Ref 回调会触发两次？

经常让开发人员感到困惑的中心行为是回调的双重调用。当具有回调 ref 的组件呈现时，回调函数通常会连续调用两次：

1. 第一次调用： 使用 null 作为参数。
2. 第二次调用： 使用 DOM 元素实例作为参数。

这不是一个 bug；这是 React 团队的刻意设计选择。使用 null 进行调用表示正在分离先前的 ref（如果有）。这为您提供了执行清理操作的关键机会。例如，如果您在先前的呈现中将事件侦听器附加到节点，则 null 调用是在附加新节点之前删除它的最佳时机。

然而，问题不是这个挂载/卸载周期。真正的性能问题出现在每次重新渲染时都会发生这种双重触发，即使组件的状态更新与 ref 本身完全无关。

内联函数的陷阱

考虑这个看似无辜的实现在重新渲染的函数式组件内部：

            import React, { useState } from 'react';

function FrequentUpdatesComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h3>Counter: {count}</h3>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <div
        ref={(node) => {
          // This is an inline function!
          console.log('Ref callback fired with:', node);
        }}
      >
        I am the referenced element.
      </div>
    </div>
  );
}
            

              
                Copy
              
            
          

如果您运行此代码并单击“Increment”按钮，您将在每次单击时在控制台中看到以下内容：

            Ref callback fired with: null
Ref callback fired with: <div>...</div>
            

              
                Copy
              
            
          

为什么会这样？因为在每次呈现时，您都在为 ref prop 创建一个全新的函数实例：(node) => { ... }。在其协调过程中，React 将先前呈现中的 props 与当前呈现中的 props 进行比较。它看到 ref prop 已更改（从旧函数实例更改为新函数实例）。React 的约定很明确：如果 ref 回调发生更改，它必须首先通过使用 null 调用它来清除旧的 ref，然后通过使用 DOM 节点调用它来设置新的 ref。这会在每次呈现时不必要地触发清理/设置周期。

对于一个简单的 console.log，这只是一个很小的性能损失。但是想象一下您的回调做了某些昂贵的事情：

• 附加和分离复杂的事件侦听器（例如，scroll、resize）。
• 初始化繁重的第三方库（例如，D3.js 图表或映射库）。
• 执行导致布局重排的 DOM 测量。

在每次状态更新时执行此逻辑会严重降低应用程序的性能并引入细微的、难以追踪的错误。

解决方案：使用 `useCallback` 进行记忆化

此问题的解决方案是确保 React 接收到跨重新渲染的 ref 回调的完全相同的函数实例，除非我们明确希望它发生更改。这是 useCallback hook 的完美用例。

useCallback 返回回调函数的记忆化版本。仅当其依赖项数组中的某个依赖项发生更改时，此记忆化版本才会更改。通过提供一个空依赖项数组 ([])，我们可以创建一个稳定的函数，该函数在组件的整个生命周期内持续存在。

让我们使用 useCallback 重构我们之前的示例：

            import React, { useState, useCallback } from 'react';

function OptimizedComponent() {
  const [count, setCount] = useState(0);

  // Create a stable callback function with useCallback
  const myRefCallback = useCallback(node => {
    // This logic now runs only when the component mounts and unmounts
    console.log('Ref callback fired with:', node);
    if (node !== null) {
      // You can perform setup logic here
      console.log('Element is mounted!');
    }
  }, []); // <-- Empty dependency array means the function is created only once

  return (
    <div>
      <h3>Counter: {count}</h3>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <div ref={myRefCallback}>
        I am the referenced element.
      </div>
    </div>
  );
}
            

              
                Copy
              
            
          

现在，当您运行此优化版本时，您将总共只看到两次控制台日志：

1. 组件最初挂载时一次 (Ref callback fired with: <div>...</div>)。
2. 组件卸载时一次 (Ref callback fired with: null)。

单击“Increment”按钮将不再触发 ref 回调。我们已成功阻止在每次重新渲染时进行不必要的清理/设置周期。React 在后续呈现中看到 ref prop 的相同函数实例，并正确地确定不需要进行任何更改。

高级场景和最佳实践

虽然空依赖项数组很常见，但在某些情况下，您的 ref 回调需要对 props 或状态的更改做出反应。这正是 useCallback 的依赖项数组的强大之处。

处理回调中的依赖项

想象一下，您需要在 ref 回调中运行一些依赖于状态或 prop 的逻辑。例如，根据当前主题设置一个 `data-` 属性。

            function ThemedComponent({ theme }) {
  const [internalState, setInternalState] = useState(0);

  const themedRefCallback = useCallback(node => {
    if (node !== null) {
      // This callback now depends on the 'theme' prop
      console.log(`Setting theme attribute to: ${theme}`);
      node.setAttribute('data-theme', theme);
    }
  }, [theme]); // <-- Add 'theme' to the dependency array

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <div ref={themedRefCallback}>This element's theme will update.</div>
      {/* ... imagine a button here to change the parent's theme ... */}
    </div>
  );
}
            

              
                Copy
              
            
          

在此示例中，我们将 theme 添加到 useCallback 的依赖项数组。这意味着：

• 仅当 theme prop 更改时，才会创建一个新的 themedRefCallback 函数。
• 当 theme prop 更改时，React 会检测到新的函数实例并重新运行 ref 回调（首先使用 null，然后使用元素）。
• 这允许我们的效果（设置 `data-theme` 属性）使用更新的 theme 值重新运行。

这是正确且预期的行为。我们明确地告诉 React 在其依赖项发生更改时重新触发 ref 逻辑，同时仍然阻止它在不相关的状态更新时运行。

与第三方库集成

回调 ref 最强大的用例之一是初始化和销毁需要附加到 DOM 节点的第三方库的实例。这种模式完美地利用了回调的挂载/卸载性质。

这是管理像图表或地图库这样的库的强大模式：

            import React, { useRef, useCallback, useEffect } from 'react';
import SomeChartingLibrary from 'some-charting-library';

function ChartComponent({ data }) {
  // Use a ref to hold the library instance, not the DOM node
  const chartInstance = useRef(null);

  const chartContainerRef = useCallback(node => {
    // The node is null when the component unmounts
    if (node === null) {
      if (chartInstance.current) {
        console.log('Cleaning up chart instance...');
        chartInstance.current.destroy(); // Cleanup method from the library
        chartInstance.current = null;
      }
      return;
    }

    // The node exists, so we can initialize our chart
    console.log('Initializing chart instance...');
    const chart = new SomeChartingLibrary(node, {
      // Configuration options
      data: data,
    });
    chartInstance.current = chart;

  }, [data]); // Re-create the chart if the data prop changes

  return <div className="chart-container" ref={chartContainerRef} style={{ height: '400px' }} />;
}
            

              
                Copy
              
            
          

这种模式非常干净且具有弹性：

1. 初始化： 当 `div` 挂载时，回调接收 `node`。它创建一个新的图表库实例并将其存储在 `chartInstance.current` 中。
2. 清理： 当组件卸载时（或者如果 `data` 更改，从而触发重新运行），首先使用 `null` 调用回调。该代码检查图表实例是否存在，如果存在，则调用其 `destroy()` 方法，以防止内存泄漏。
3. 更新： 通过在依赖项数组中包含 `data`，我们确保如果图表的数据需要进行根本性更改，则整个图表将被完全销毁并使用新数据重新初始化。对于简单的数据更新，库可能会提供一个 `update()` 方法，该方法可以在单独的 `useEffect` 中处理。

性能比较：优化 *真正* 重要的时候？

重要的是以务实的态度对待性能。虽然将每个 ref 回调包装在 `useCallback` 中是一个好习惯，但实际的性能影响会因回调内部完成的工作而异。

影响可忽略不计的场景

如果您的回调仅执行简单的变量赋值，则在每次呈现时创建一个新函数的开销非常小。现代 JavaScript 引擎在函数创建和垃圾回收方面非常快。

示例： ref={(node) => (myRef.current = node)}

在这种情况下，虽然技术上不太理想，但您不太可能在实际应用程序中衡量到性能差异。不要陷入过早优化的陷阱。

影响显著的场景

当您的 ref 回调执行以下任何操作时，您应该始终使用 useCallback：

• DOM 操作： 直接添加或删除类、设置属性或测量元素大小（这可能会触发布局重排）。
• 事件侦听器： 调用 `addEventListener` 和 `removeEventListener`。在每次呈现时触发此操作是引入错误和性能问题的保证方法。
• 库实例化： 如我们的图表示例所示，初始化和销毁复杂对象非常昂贵。
• 网络请求： 根据 DOM 元素的存在发出 API 调用。
• 将 Refs 传递给记忆化子组件： 如果您将 ref 回调作为 prop 传递给包装在 React.memo 中的子组件，则不稳定的内联函数会破坏记忆化并导致子组件不必要地重新渲染。

一个好的经验法则是： 如果您的 ref 回调包含多个简单的赋值，请使用 useCallback 对其进行记忆化。

结论：编写可预测且性能良好的代码

React 的 ref 回调是一个强大的工具，可以对 DOM 节点和组件实例提供细粒度的控制。了解它的生命周期——特别是清理期间有意的 `null` 调用——是有效使用它的关键。

我们已经了解到，对 ref prop 使用内联函数的常见反模式会导致不必要的且可能代价高昂的每次呈现的重新执行。解决方案是优雅且符合习惯的 React：使用 useCallback hook 稳定回调函数。

通过掌握这种模式，您可以：

• 防止性能瓶颈： 避免在每次状态更改时进行代价高昂的设置和拆卸逻辑。
• 消除错误： 确保事件侦听器和库实例得到干净地管理，而不会出现重复或内存泄漏。
• 编写可预测的代码： 创建 ref 逻辑的行为完全符合预期的组件，仅在组件挂载、卸载或其特定依赖项更改时运行。

下次您使用 ref 来解决复杂问题时，请记住记忆化回调的强大功能。这是您代码中的一个微小更改，可以显着提高 React 应用程序的质量和性能，从而为世界各地的用户带来更好的体验。